<template>
    <div
      class="header"
      v-show="showheader"
      :style="opacityStyle"
    >
      <router-link to="/">
        <span class="iconfont icon-zuojiantou"></span>
      </router-link>
      一周最热
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
              showheader:false,
              opacityStyle:{
                  opacity:0
              }
            }
        },
        methods:{
          handleScroll(){
            // console.log(document.documentElement.scrollTop)
            const  top = document.documentElement.scrollTop;//页面向上滚动的距离
            if( top > 60){//滚动高度大于60
              let opacity = top / 120 ; //计算透明度
              opacity > 1 ? 1 : opacity;   //最大不能超过1
              this.opacityStyle = {//重新赋值
                opacity
              };
              this.showheader = true;
            }else {
              this.showheader = false;
            }
          }
        },
        mounted(){
          window.addEventListener('scroll',this.handleScroll)
        }
    }
</script>

<style scoped lang="stylus">
  .header {
    width: 100%;
    background: #00bcd4;
    line-height: .4rem;
    color: white;
    position: fixed;
    top: .0;
    left: 0;
    text-align: center;
    font-size: .16rem;
    z-index: 1;
    span {
      position: absolute;
      left: .1rem;
      top: 0;
      font-size: .18rem;
      color: white;
    }
  }
</style>
